app = new Vue({
    el: '#app',
    data: function () {
        return {
            defaultProps: { children: 'children', label: 'label' },
            // 加载
            loading: {
                download: false,
                tree: false,
                table: false
            },
            // 开关
            open: {
                datasource: false,
                example: false,
                fill: false,
                menu: false
            },
            // 示例url
            example: {
                mysql: "jdbc:mysql://127.0.0.1:3306/test?characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true",
                oracle: "jdbc:oracle:thin:@127.0.0.1:1521:orcl",
                db2: "jdbc:db2://127.0.0.1:50000/test",
                king: "jdbc:kingbase8://127.0.0.1:54321/test"
            },
            treeFilter: '',
            treeData: [{ id: 0, level: 0, label: "[ 根目录 ]", children: [] }],
            currTreeNode: null,
            currDatasource: {},
            tableFilter: '',
            tableList: [],
            tablePage: {
                currentPage: 1,
                pageSize: 15,
                totalCount: 0
            },
            tablePitch:[],
            currStrategy: {},
            fillDsList:[],
            fillList: [],
            openMenu: {
                tab: true,
                strategy: false
            },
            menuList: [
                { name: 'TABLE 表', index: 'tab' },
                { name: '个性化配置', index: 'strategy' },
            ]
        }
    },
    methods: {
        downloadFile() {

        },
        getTagClass(data) {
            let classNames = "common-tag-color-class";
            if (data.tag == 'M') {
                classNames = 'mysql-tag-color-class';
            } else if (data.tag == 'O') {
                classNames = 'oracle-tag-color-class';
            } else if (data.tag == 'D') {
                classNames = 'db2-tag-color-class';
            } else if (data.tag == 'K') {
                classNames = 'king-tag-color-class';
            }
            return "tag-class " + classNames;
        },
        initTreeData() {
            this.loading.tree = true;
            axiosDoAjax('GET', ip + '/dataSource/all', undefined, function (res) {
                if (res.success) {
                    app.treeData[0].children = res.data;
                }
                app.loading.tree = false;
            }, function (error) {
                app.loading.tree = false;
            })
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        selectedNode(data, node, event) {
            this.currTreeNode = data;
            // 根目录点击不收缩
            if (data.id == 0 || data.id == '0') {
                this.$nextTick(() => {
                    node.expanded = true;
                })
            } else {
                this.tableSearchList();
                this.strategyGet();
                this.fillDatasourceList();
            }
        },
        addNode() {
            this.currDatasource = {};
            this.open.datasource = true;
        },
        delNode(node) {
            this.$confirm('将永久删除数据源, 是否继续?', '提示', {
                confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
            }).then(() => {
                axiosDoAjax('GET', ip + '/dataSource/delete', { id: node.id }, function (res) {
                    if (res.success) {
                        app.currDatasource = {};
                        app.initTreeData();
                    } else {
                        app.showMsg(res.msg, 'warning');
                    }
                }, undefined);
            });
        },
        editNode(node) {
            this.currTreeNode = node;
            this.open.datasource = true;
            axiosDoAjax('GET', ip + '/dataSource/getById', { id: node.id }, function (res) {
                if (res.success) {
                    app.currDatasource = res.data;
                } else {
                    app.showMsg(res.msg, 'warning');
                }
            }, undefined);
        },
        saveNode() {
            axiosDoAjax('POST', ip + '/dataSource/save', this.currDatasource, function (res) {
                if (res.success) {
                    app.currDatasource = res.data;
                    app.open.datasource = false;
                    app.initTreeData();
                } else {
                    app.showMsg(res.msg, 'warning');
                }
            }, undefined);
        },
        copyNode() {
            axiosDoAjax('GET', ip + '/dataSource/copy', { id: this.currTreeNode.id }, function (res) {
                if (res.success) {
                    app.initTreeData();
                } else {
                    app.showMsg(res.msg, 'warning');
                }
            }, undefined);
        },
        rightClickNode(event, node) {
            this.currTreeNode = node;
            if (this.currTreeNode.id == 0 || this.currTreeNode.id == '0') {
                return;
            }
            this.open.menu = false;
            this.open.menu = true;
            var menu = document.querySelector('.menu');
            this.styleMenu(menu);
        },
        tableSearchList() {
            this.loading.table = true;
            var tableParam = {
                currentPage: this.tablePage.currentPage,
                pageSize: this.tablePage.pageSize,
                tableName: this.tableFilter,
                datasourceId: this.currTreeNode.id
            }
            axiosDoAjax('get', ip + '/table/page', tableParam, function (res) {
                if (res.success) {
                    app.tableList = res.data.records;
                    app.tablePage.totalCount = res.data.total;
                }
                app.loading.table = false;
            }, function (error) {
                app.loading.table = false;
            })
        },
        tableRowClick(row, column) {
            this.$refs.table.toggleRowSelection(row);
        },
        tableSelection(selection) {
            var list = [];
            for (var i = 0; i < selection.length; i++) {
                list.push(selection[i]['tableName']);
            }
            this.tablePitch = list;
        },
        tablePageSize(size) {
            this.tablePage.pageSize = size;
            this.tableSearchList();
        },
        tableCurrentPage(currentPage) {
            this.tablePage.currentPage = currentPage;
            this.tableSearchList();
        },
        strategyGet() {
            let params = { datasourceId: this.currTreeNode.id }
            axiosDoAjax('get', ip + '/strategy/getByDatasourceId', params, function (res) {
                if (res.success && res.data) {
                    app.currStrategy = res.data;
                }
            }, undefined)
        },
        strategySave() {
            let params = {
                datasourceId: this.currTreeNode.id,
                strategy: this.currStrategy
            }
            axiosDoAjax('POST', ip + '/strategy/save', params, function (res) {
                if (res.success && res.data) {
                    app.currStrategy = res.data;
                    app.showMsg("操作成功");
                }else {
                    app.showMsg(res.msg, 'warning');
                }
            }, undefined);
        },
        fillDatasourceList(){
            let params = { datasourceId: this.currTreeNode.id }
            axiosDoAjax('get', ip + '/fill/getByDatasourceId', params, function (res) {
                if (res.success && res.data) {
                    app.fillDsList = res.data;
                }
            }, undefined);
        },
        fillSave() {

        },
        fillDsDel(fill) {
            let params = {
                fillId: fill.id,
                datasourceId: this.currTreeNode.id
            }
            axiosDoAjax('get', ip + '/fill/delete', params, function (res) {
                if (res.success) {
                    app.showMsg("操作成功");
                }else {
                    app.showMsg(res.msg, 'warning');
                }
            }, undefined);
        },
        fillDsSave(){

        },
        fillSelection(selection) {
            this.strategy.fillList = JSON.stringify(selection);
        },
        fillRowClick(row, column) {
            this.$refs.fill.toggleRowSelection(row, column);
        },
        menuSelect(key, path) {
            this.openMenu[key] = true;
            for (let i = 0; i < this.menuList.length; i++) {
                if (this.menuList[i].index != key) {
                    this.openMenu[this.menuList[i].index] = false;
                }
            }
        },
        foo() {
            this.open.menu = false;
            document.removeEventListener('click', this.foo);
            document.removeEventListener('contextmenu', this.foo);
        },
        styleMenu(menu) {
            document.addEventListener('click', this.foo);
            document.addEventListener('contextmenu', this.foo);
            if (event.clientX > 1800) {
                menu.style.left = event.clientX - 100 + 'px';
            } else {
                menu.style.left = event.clientX + 1 + 'px';
            }
            if (event.clientY > 700) {
                menu.style.top = event.clientY - 30 + 'px';
            } else {
                menu.style.top = event.clientY - 10 + 'px';
            }
        },
    },
    watch: {
        treeFilter: function (newVal) {
            this.$refs.tree.filter(newVal);
        }
    },
    created: function () {
        initShowMsg(this);
        vueObj = this;
        this.initTreeData();
    }
})